<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <base th:href="${#request.getContextPath()}+'/'">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
	<link rel="stylesheet" href="css/layui.css"  media="all">
  <link rel="stylesheet" href="css/serch.css"  media="all">
  <!-- 注意：如果你直接复制所有代码到本地，上述css路径需要改成你本地的 -->
		   <style>
        /*html, body, #container {
            height: 100%;
            width: 100%;
        }*/

        .content-window-card {
            position: relative;
            box-shadow: none;
            bottom: 0;
            left: 0;
            width: auto;
            padding: 0;
        }

        .content-window-card p {
            height: 2rem;
        }

        .custom-info {
            border: solid 1px silver;
        }

        div.info-top {
            position: relative;
            background: none repeat scroll 0 0 #F9F9F9;
            border-bottom: 1px solid #CCC;
            border-radius: 5px 5px 0 0;
        }

        div.info-top div {
            display: inline-block;
            color: #333333;
            font-size: 14px;
            font-weight: bold;
            line-height: 31px;
            padding: 0 10px;
        }

        div.info-top img {
            position: absolute;
            top: 10px;
            right: 10px;
            transition-duration: 0.25s;
        }

        div.info-top img:hover {
            box-shadow: 0px 0px 5px #000;
        }

        div.info-middle {
            font-size: 12px;
            padding: 10px 6px;
            line-height: 20px;
        }

        div.info-bottom {
            height: 0px;
            width: 100%;
            clear: both;
            text-align: center;
        }

        div.info-bottom img {
            position: relative;
            z-index: 104;
        }

        span {
            margin-left: 5px;
            font-size: 11px;
        }

        .info-middle img {
            float: left;
            margin-right: 6px;
        }
    </style>
		<script type="text/javascript" src="js/jquery.min.js" ></script>
		<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.8&key=a1661afb10b214933c08f95f60668d52"></script>
		<script src="layui.js" charset="utf-8"></script>
		
<style>
	.test{
		height: 100px;
		font-size:70px; 
		color:black;
		font-family: "biaoti";
		text-align: center;
		}
	.part2{
			color:#3F3F3F;
			font-family: "zhengwen";
			width: 90%;
			margin: 0px auto;
			}
		
		.part{
			color:#3F3F3F;
			font-family: "zhengwen";
			width: 90%;
			height: 460px;
			margin: 0px auto;
			}
			.part1{
				color:#3F3F3F;
				font-family: "zhengwen";
				width: 600px;
				height: 450px;
				line-height: 50px;
				float: left;
				}

</style>
	<script type="text/javascript">
	//影片上传
	function uploadmovie(){
		alert(1);
		  $.ajax({
			   url:"/cinema/add",
			   //dataType:"json",
				   data:{yname:a,
					  yaddress:address,
					 ytext:d,
					yphone:e},
			   type:"post",
			   success:function(data){
				   alert(data);
			   }
		   })  
}
	
	</script>
</head>
<body> 

<fieldset class="layui-elem-field layui-field-title" >
		  <legend><img src="img/ic_honkan.svg" width="30px">&nbsp;&nbsp;上传影片</legend>
</fieldset>
<!-- 示例-970 -->
<ins class="adsbygoogle" style="display:inline-block;width:970px;height:50px" data-ad-client="ca-pub-6111334333458862" data-ad-slot="3820120620"></ins>
 
<form class="layui-form" action="" lay-filter="example">
  <div class="layui-form-item">
    <label class="layui-form-label">影片名称</label>
    <div class="layui-input-block">
      <input type="text" name="username" lay-verify="" autocomplete="off" placeholder="请输入影片名称" class="layui-input">
    </div>
  </div>
<div class="layui-form-item">
	<div class="layui-upload">
		<label class="layui-form-label">影片封面</label>
		<div class="layui-upload-list">
			<img class="layui-upload-img" id="upimg" style="height: 200px; width: 400px;">
			<button type="button" class="layui-btn layui-btn-sm" id="my" name="file">上传图片</button>
			<p id="demoText"></p>
		</div>
		
	</div>
</div>
    <div class="layui-form-item">
    <label class="layui-form-label">影片语言</label>
    <div class="layui-input-block">
      <select name="language">
        <option value=""></option>
        <option value="国语2D">国语2D</option>
        <option value="英语3D">英语3D</option>
        <option value="国语3D">国语3D</option>
      </select>
    </div>
  </div>
  <div class="layui-form-item">
    <label class="layui-form-label">影片类型</label>
    <div class="layui-input-block">
      <input type="checkbox" name="a" title="悬疑" value="悬疑">
      <input type="checkbox" name="b" title="爱情" value="爱情">
      <input type="checkbox" name="c" title="科幻" value="科幻">
      <input type="checkbox" name="d" title="励志" value="励志">
      <input type="checkbox" name="e" title="冒险" value="冒险">
      <input type="checkbox" name="f" title="科幻" value="科幻">
      <input type="checkbox" name="g" title="动作" value="动作">
      <input type="checkbox" name="h" title="历史" value="历史">
    </div>
  </div>
      <div class="layui-form-item">
    <label class="layui-form-label">影片地区</label>
    <div class="layui-input-block">
      <select name="country">
        <option value=""></option>
        <option value="中国">中国</option>
        <option value="美国">美国</option>
        <option value="韩国">韩国</option>
        <option value="日本">日本</option>
        <option value="英国">英国</option>
      </select>
    </div>
  </div>
      <div class="layui-form-item">
    <label class="layui-form-label">主演</label>
    <div class="layui-input-block">
      <input type="text" name="mstar" lay-verify="title" autocomplete="off" placeholder="主演名称" class="layui-input">
    </div>
  </div>
    <div class="layui-form-item">
    <label class="layui-form-label">导演</label>
    <div class="layui-input-block">
      <input type="text" name="actor" lay-verify="title" autocomplete="off" placeholder="导演名称" class="layui-input">
    </div>
  </div>
      <div class="layui-form-item">
    <label class="layui-form-label">影片时长</label>
    <div class="layui-input-block">
      <input type="text" name="time" lay-verify="number" autocomplete="off" placeholder="影片时长" class="layui-input">
    </div>
  </div>
  <div class="layui-form-item layui-form-text">
    <label class="layui-form-label">电影介绍</label>
    <div class="layui-input-block">
      <textarea placeholder="请输入内容" class="layui-textarea" name="desc"></textarea>
    </div>
  </div>
 
  <div class="layui-form-item">
    <div class="layui-input-block">
      <button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">立即提交</button>
    </div>
  </div>
</form>

<script src="layui.js" charset="utf-8"></script>
<script>
layui.use('form', function() {
	var form = layui.form;
	//监听提交
	form.on('submit(demo1)', function(data) {
		layer.msg(JSON.stringify(data.field));
		  $.ajax({
			   url:"/movie/upload",
			   //dataType:"json",
			   data:data.field,
			   type:"post",
			   success:function(data){
				   alert(data);
			   }
		   })  
		//return false;
	});
});
	layui.use('upload', function(){
  var $ = layui.jquery
  ,upload = layui.upload;
  
  //普通图片上传
  var uploadInst = upload.render({
    elem: '#my'
    ,url: '/movie/add'
    ,before: function(obj){
      //预读本地文件示例，不支持ie8
      obj.preview(function(index, file, result){
        $('#upimg').attr('src', result); //图片链接（base64）
      });
    }
    ,done: function(res){
      //如果上传失败
      if(res.code > 0){
        return layer.msg('上传失败');
      }else{
    	  return layer.msg('上传成功');
      }
      //上传成功

    }
    ,error: function(){
      //演示失败状态，并实现重传
      var demoText = $('#demoText');
      demoText.html('<span style="color: #FF5722;">上传失败</span> <a class="layui-btn layui-btn-xs demo-reload">重试</a>');
      demoText.find('.demo-reload').on('click', function(){
        uploadInst.upload();
      });
    }
  });
  //选完文件后不自动上传
  upload.render({
    elem: '#test8'
    ,url: '/upload/'
    ,auto: false
    //,multiple: true
    ,bindAction: '#test9'
    ,done: function(res){
      console.log(res)
    }
  });
});
layui.use('element', function(){
  var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
  
  //监听导航点击
  element.on('nav(demo)', function(elem){
    //console.log(elem)
    layer.msg(elem.text());
  });
});

layui.use(['carousel', 'form'], function(){
  var carousel = layui.carousel
  ,form = layui.form;
  
  //常规轮播
  carousel.render({
    elem: '#test1'
    ,arrow: 'always'
  });
  
  //改变下时间间隔、动画类型、高度
  carousel.render({
    elem: '#test2'
    ,interval: 1800
    ,anim: 'fade'
    ,height: '120px'
  });
  
  //设定各种参数
  var ins3 = carousel.render({
    elem: '#test3'
  });
  //图片轮播
  carousel.render({
    elem: '#test10'
    ,width: '100%'
    ,height: '500px'
    ,interval: 5000
  });
  
  //事件
  carousel.on('change(test4)', function(res){
    console.log(res)
  });
  
  var $ = layui.$, active = {
    set: function(othis){
      var THIS = 'layui-bg-normal'
      ,key = othis.data('key')
      ,options = {};
      
      othis.css('background-color', '#5FB878').siblings().removeAttr('style'); 
      options[key] = othis.data('value');
      ins3.reload(options);
    }
  };
  
  //监听开关
  form.on('switch(autoplay)', function(){
    ins3.reload({
      autoplay: this.checked
    });
  });
  
  $('.demoSet').on('keyup', function(){
    var value = this.value
    ,options = {};
    if(!/^\d+$/.test(value)) return;
    
    options[this.name] = value;
    ins3.reload(options);
  });
  
  //其它示例
  $('.demoTest .layui-btn').on('click', function(){
    var othis = $(this), type = othis.data('type');
    active[type] ? active[type].call(this, othis) : '';
  });
});
			//页码
			layui.use(['laypage', 'layer'], function(){
			var laypage = layui.laypage
			,layer = layui.layer;
			laypage.render({
				elem: 'demo1'
				,count: 70 //数据总数
				,jump: function(obj){
				console.log(obj)
				}
			});
			laypage.render({
				elem: 'demo2'
				,count: 70 //数据总数
				,jump: function(obj){
				console.log(obj)
				}
			});
			});
			//全选
			document.getElementById("check").onclick = function() {
				var checked = document.getElementById("check").checked;
				var checkson = document.getElementsByName("oid");
				if (checked) {
					for (var i = 0; i < checkson.length; i++) {
						checkson[i].checked = true;
					}
				} else {
					for (var i = 0; i < checkson.length; i++) {
						checkson[i].checked = false;
					}
				}
			}

			layui.use('element', function() {
				var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块

				//监听导航点击
				element.on('nav(demo)', function(elem) {
					//console.log(elem)
					layer.msg(elem.text());
				});
			});


</script>
</body>
</html>
